<!--每日宠物日志-->
<template>
    <div id="petLogs">
    <div :style="`height:${height};background:white`">
      <van-tree-select
        :items="items"
        :main-active-index="active"
        @click-nav="onClickNav($event)"
        bind:click-item="onClickItem"
        >
<!-- <div slot="content" style="height:100px;width:100px"> -->
    <light-timeline :items='items1' slot="content" style="margin-left:3rem">
    </light-timeline>
    <!-- </div>
     -->
</van-tree-select>

    <div class="button_cls">
        <van-button plain type="primary" @click="openSheetPet" @select="chekPet($event)">切换宠物</van-button>
        <van-button plain type="info" @click="addLogs">添加记录</van-button>
    </div>

    <div class="petInfo">
        <p class="petInfo_head">萌宠小卡片</p>

        <div class="petInfo_body"> 
            <p>昵称： {{petName}}</p>
            <p>编号： {{petId}}</p>
            <p>年龄： {{petAge}}岁</p>
            <p>出生日期： {{petBirthday}}</p>
        </div>

    </div>
      
    </div>
        <van-action-sheet
        v-model="petCkShowStatus"
        :actions="actions"
        @select="chekPet($event)"
        cancel-text="取消"/>


        <van-dialog
            use-slot
            title="添加今日萌宠日志"
            v-model="addLogsStatus"
            show-cancel-button
            confirm-button-open-type="getUserInfo"
            bind:close="onClose"
            @confirm="confirm"
            >
            <textarea style="height:100px;width:100%" v-model="content" autofocus/>
        </van-dialog>
    </div>
</template>
<script>
import Vue from 'vue'
import LightTimeline from 'vue-light-timeline'
import {addPetLog,getCurrentPetLog,getAllLeftAction,getMyPetList} from '../../../request/mobile/mine/request_mine'
Vue.use(LightTimeline)
export default {
    data(){
        return{
            items1: [
              
             ],
            active:2,
           items:[],
           mainActiveIndex :0,
           height:'',
           petCkShowStatus:false,
           actions:[
               ],
            addLogsStatus:false,
            content:"",
            petName:'',
            petId:'',
            petAge:'',
            petBirthday:"",

        }

    },
    methods:{
        onClickNav(event){
            this.active=event
            var checkDate = '';
            var items = this.items;
            for(var item in items){
                if(item==event){
                    checkDate=items[item].text
                    break;
                }
            }
            console.log(checkDate)
            this.getCurrentPetLog(checkDate)
        },
        getHeight(){
            this.height = window.innerHeight-50+"px"
        },
        chekPet(event){
            console.log(event)
            this.petName = event.name
            this.petId=event.id;
            this.petBirthday=event.petBirthday;
            this.petAge=event.petAge;
            this.pet
            this.getAllLeftAction()
             var cuDate=new Date()
             var value = cuDate.getFullYear()+'-'+(cuDate.getMonth()+1)+"-"+cuDate.getDate();
            this.getCurrentPetLog(value)
            this.petCkShowStatus=false
        },
        openSheetPet(){
            this.petCkShowStatus=!this.petCkShowStatus
        },
        confirm(){
            if(this.content==''){
                this.$Notify({type:'warning',message:'发布失败，内容为空'})
                return ;
            }
            var dataStr = new Date().toLocaleTimeString();
            addPetLog({petAction:this.content,petId:this.petId})
            .then(res=>{
                if(res.code==200){
                    this.active=this.items.length-1
                    this.getCurrentPetLog(this.items[this.items.length-1].text)
                    this.content=''
                    this.$Notify({ type: 'success', message: '发布成功' });
                    return;
                }
                else{
                    this.$Toast(res.msg)
                }
                
            })
            //
            
        },
        addLogs(){
            this.addLogsStatus=!this.addLogsStatus
        },
        getCurrentPetLog(checkDate){
            //根据active索引值确定所选的时间
            this.items1=[]
            getCurrentPetLog({petId:this.petId,date:checkDate}).then(res=>{
                if(res.code==200){
                    var thisData = res.data;
                    for(var data in thisData){
                        var cudata = thisData[data];
                        this.items1.push({
                            tag: cudata.actionTime,
                            type: 'circle',
                            content: cudata.petAction
            
                        })
                    }
                }else{
                    this.items1=[]
                }
            })
        },

        getAllLeftAction(){
            this.items=[]
            getAllLeftAction(this.petId).then(res=>{
                if(res.code==200){
                    var datas = res.data;
                    if(datas.length==0){
                        this.$Toast("日志记录为空，赶紧添加吧")
                        return;
                    }
                    for(var data in datas){
                        var cdata = datas[data].actionDate;
                        this.items.push({
                            text:cdata
                        })
                    }
                }
                this.active=this.items.length-1
            })
        },

        getMyPetList(){
            getMyPetList({userId:1}).then(res=>{
                if(res.code==200){
                    var datas = res.data;
                    for(var index in datas){
                        var data = datas[index];
                        if(index==0){
                            this.petId=data.petId;
                            this.petAge=data.petAge;
                            this.petBirthday=data.petBirthday;
                            this.petName=data.petName;
                        }
                        this.actions.push({
                            name:data.petName,
                            id:data.petId,
                            petAge:data.petAge,
                            petBirthday:data.petBirthday
                        })
                    }
                }
            })
        }
    },
    created(){
        this.getHeight();
        var cuDate=new Date()
         var value = cuDate.getFullYear()+'-'+(cuDate.getMonth()+1)+"-"+cuDate.getDate();
        this.getCurrentPetLog(value)
        this.getAllLeftAction()
        this.getMyPetList()
    }
}
</script>
<style scoped>
    .button_cls{
        display: flex;
        margin-top: .6rem;
        justify-content: space-between;
        margin: 1rem 3rem 0rem 3rem;
    }
    .petInfo{
        background: #f3f3ee;
        margin: 1rem;
        border-radius: 1rem;
    }
    .petInfo_body{
        margin-left: 2rem;
        color: #907777;
    }
    .petInfo_head{
        text-align: center;
        color: #6f6363;
    }
</style>